<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>把留言板改成本地存储</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 99;
    }

    #zhoog {
        width: 100%;
        height: 100vh;
        z-index: 999;
    }

    #message {
        width: 200px;
        height: 60px;
        background: aqua;
        border: none;
        font-size: 30px;
    }

    #box {
        width: 500px;
        height: 450px;
        background: bisque;
        margin: auto;
        display: none;
        position: absolute;
        top: 120px;
        left: 550px;
        margin: auto;
        z-index: 9999;
    }

    table {
        /* border: 1px solid black; */
        border-collapse: collapse;
    }

    tr,
    th,
    td {
        width: 250px;
        height: 60px;
        border-bottom: 1px solid black;
        text-align: center;
    }

    .title {
        width: 460px;
        height: 60px;
        padding-left: 20px;
        line-height: 60px;
    }

    .title h2 {
        float: left;
        font-weight: normal;
    }

    #span_ {
        float: right;
        font-size: 30px;
        padding-right: 10px;
    }

    .nev {
        width: 460px;
        margin: auto;
        margin-top: 20px;
    }

    #biaoti,
    #ren {
        width: 460px;
        height: 40px;
        font-size: 22px;
    }

    #neirong {
        width: 462px;
        height: 67px;
    }

    .nev h4 {
        padding-bottom: 10px;
    }

    .nev #biaoti,
    #ren,
    #neirong {
        margin-bottom: 20px;
        font-size: 22px;
    }

    .anniu {
        width: 460px;
        margin: auto;
    }

    #publish,
    #shutDown {
        width: 50px;
        height: 30px;
        float: right;
        margin-top: 12px;
    }

    #publish {
        background: rgb(1, 119, 253);
        margin-left: 10px;
    }

    #shan {
        width: 200px;
        height: 40px;
    }
</style>
<body>
    <div id="zhoog">
        <button id="message">我要留言</button>
        <table>
            <tr>
                <th>ID</th>
                <th>标题</th>
                <th>留言人</th>
                <th>内容</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            <tbody id="tb"></tbody>
        </table>
    </div>

    <div id="box">
        <div class="title">
            <h2>发布留言</h2>
            <span id="span_">×</span>
        </div>
        <hr>
        <div class="nev">
            <h4>留言标题：</h4>
            <input type="text" id="biaoti">
            <h4>留言人：</h4>
            <input type="text" id="ren">
            <h4>留言内容：</h4>
            <textarea name="" id="neirong" cols="" rows=""></textarea>
        </div>
        <hr>
        <div class="anniu">
            <button id="publish">发布</button>
            <button id="shutDown">关闭</button>
        </div>
    </div>
</body>
<script>
    window.onload = function () {
        //页面渲染
        var xhttp = new XMLHttpRequest()
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                var dataObj = JSON.parse(xhttp.responseText)
                var sre = ''
                for (var i in dataObj.data) {
                    sre += `<tr>
                                <td>${dataObj.data[i].id}</td>
                                <td>${dataObj.data[i].name}</td>
                                <td>${dataObj.data[i].title}</td>
                                <td>${dataObj.data[i].content}</td>
                                <td>${dataObj.data[i].updated_at}</td>
                                <td><button name ='del' id='shan'>删除</button></td>
                            </tr>`
                    // tb.innerHTML = sre
                }
                document.getElementById('tb').innerHTML = sre
            }
        }
        xhttp.open('GET', 'https://liu.zzgoodqc.cn/lyb', true)
        xhttp.send()
        //显示
        document.getElementById('message').onclick = function () {
            document.getElementById('tb').style.display = 'none'
            /* var box =  */document.getElementById('box').style.display = 'block'
            // box.style.display = 'block'
            document.getElementById('zhoog').style = 'background:black;opacity: 0.4;'
        }
        //隐藏
        document.getElementById('shutDown').onclick = function () {
            document.getElementById('box').style.display = 'none'
            document.getElementById('zhoog').style = 'opacity: 1;'
            document.getElementById('tb').style.display = 'block'
            location.reload()
        }
        //×号关闭发布留言板
        document.getElementById('span_').onclick = function () {
            document.getElementById('box').style.display = 'none'
            document.getElementById('zhoog').style = 'opacity: 1;'
            document.getElementById('tb').style.display = 'block'
            location.reload()
        }
        //发布留言
        document.getElementById('publish').onclick = function () {

            var title = document.getElementById('biaoti').value,
                content = document.getElementById('ren').value,
                name = document.getElementById('neirong').value
            console.log(title);
            var xhttpObj = new XMLHttpRequest()
            xhttpObj.open('POST', 'https://liu.zzgoodqc.cn/lyb/add', true)
            xhttpObj.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
            xhttpObj.send(`title=${content}&content=${name}&name=${title}`)
            // console.log(`title=${title}&content=${content}&name=${name}`);
            if (title == '' || content == '' || name == '') {
                alert('提交失败')
            } else {
                alert('提交成功')
                location.reload()
            }
        }

        //删除
        tb.onclick = function (e) {
            var data/*  = '确定删除吗？' */
            if (confirm(data == true)) {
                var ID = e.target.parentNode.parentNode.firstElementChild.innerHTML
                var this_tr = e.target.parentNode.parentNode
                tb.removeChild(this_tr)
                var xhr = new XMLHttpRequest()
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        console.log(xhr);
                        var res = JSON.parse(xhr.responseText)
                        console.log(res);
                    }
                }
                xhr.open('GET', `https://liu.zzgoodqc.cn/del/${ID}`, true)
                xhr.send()
            } else {
                return
            }

        }



    }
</script>
</html>